<template>
  <view class="container">
    <view class="filter-box">
      <view @click="filterClick" class="btn flex">
        <image src="/static/common/filter-icon-red.png" mode=""></image>
        <text>筛选</text>
      </view>
    </view>
    <view class="list">
      <z-paging ref="paging" :fixed="false" v-model="list" @query="queryList">
        <template #empty>
          <view class="empty-box">
            <image src="/static/common/empty-data.png" mode=""></image>
            <view class="empty">暂无数据</view>
          </view>
        </template>
        <view v-for="(item, index) in list" :key="index" class="statistics">
          <view class="title flex">
            2024年12月31日
            <view @click="goDetail" class="flex history">查看详情</view>
          </view>
          <view class="num-box">
            <view class="item">
              <view class="money-name">订单数</view>
              <view class="money">1000</view>
            </view>
            <view class="item">
              <view class="money-name">预估收益(元)</view>
              <view class="money">
                <text>￥</text>
                <text>1000.00</text>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
  <u-popup v-model="show" mode="bottom" closeable border-radius="24" :safe-area-inset-bottom="true">
    <view class="popup-title">选择日期</view>
    <date-pickers ref="datePickerRef"></date-pickers>
    <view class="popup-btn flex">
      <view @click="rest">重置</view>
      <view @click="confirm">确定</view>
    </view>
  </u-popup>
</template>

<script setup>
import { ref } from 'vue';
import DatePickers from '@/components/date-picker/index.vue';

const filterDate = ref('');
const show = ref(false);
const datePickerRef = ref(null);
const filterClick = () => {
  show.value = true;
};
const rest = () => {
  filterDate.value = '';
  show.value = false;
};
const confirm = () => {
  filterDate.value = datePickerRef.value.getDate();
  console.log(filterDate.value);
  show.value = false;
};

const paging = ref(null);
const list = ref([1, 2, 3, 4, 5]);
const queryList = (pageNo, pageSize) => {
  console.log(pageNo, pageSize);
  paging.value.completeByTotal([1, 2, 3, 4, 5]);
  // index.value++;
  // setTimeout(() => {
  // 	if (index.value == 3) {
  // 		index.value = 0
  // 		paging.value.complete([]);
  // 	} else {
  // 		paging.value.completeByTotal([1, 2, 3, 4, 5, 6]);
  // 	}
  // }, 500)
};
const goDetail = () => {
  uni.navigateTo({
    url: '/subPages/incomeDetail/incomeDetail',
  });
};
</script>

<style lang="scss" scoped>
.popup-btn {
  width: 750upx;
  height: 120upx;
  line-height: 120upx;
  justify-content: space-around;
  margin-top: 40upx;
}

.popup-btn > view {
  font-size: 32upx;
  font-weight: 400;
  border-radius: 64upx;
  width: 320upx;
  height: 100upx;
  line-height: 100upx;
  overflow: hidden;
  text-align: center;
}

.popup-btn > view:nth-child(1) {
  background-color: #ededed;
  color: #333;
}

.popup-btn > view:nth-child(2) {
  background-color: #ff0309;
  color: #ffffff;
}
.popup-title {
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: #333;
  line-height: 50px;
}
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  .filter-box {
    padding: 12px;
    background-color: #fff;
    .btn {
      justify-content: center;
      border: 0.5px solid #ff0309;
      border-radius: 30px;
      height: 40px;
      image {
        width: 20px;
        height: 20px;
        margin-right: 12px;
      }
      text {
        font-size: 12px;
        font-weight: 400;
        color: #ff0309;
      }
    }
  }
  .money-name {
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
  .money {
    color: #333;
    font-weight: 600;
    text {
      font-size: 12px;
      &:last-child {
        font-size: 18px;
      }
    }
  }
  .list {
    padding: 0px 12px 12px;
    height: calc(100vh - 64px);
  }
  .empty-box {
    text-align: center;
    margin-top: -150px;
    image {
      width: 120px;
      height: 120px;
      margin-bottom: 20px;
    }
    .empty {
      color: #333;
      font-weight: 500;
      font-size: 14px;
    }
  }
  .statistics {
    background-color: #ffffff;
    padding: 0 12px 12px;
    border-radius: 12px;
    margin-top: 12px;
    .title {
      height: 44px;
      justify-content: space-between;
      color: #000;
      font-weight: 500;
      font-size: 16px;
      .history {
        color: #333;
        font-weight: 400;
        font-size: 12px;
        &::after {
          content: '';
          display: inline-block;
          width: 5px;
          height: 5px;
          border-top: 1px solid #333;
          border-right: 1px solid #333;
          transform: rotate(45deg);
          margin-left: 4px;
        }
      }
    }
    .num-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      .item {
        border-radius: 8px;
        background: #ffeeee;
        padding: 12px;
        .money-name {
          margin-bottom: 6px;
        }
      }
    }
  }
}
</style>
